import React, { useState, useEffect } from 'react';
import { VideoItem, CategoryItem } from '@/app/types/video';

interface VideoEditFormProps {
  video: VideoItem;
  onSave: (updatedVideo: Partial<VideoItem>) => Promise<void>;
  onCancel: () => void;
  isSaving?: boolean;
}

export default function VideoEditForm({ video, onSave, onCancel, isSaving = false }: VideoEditFormProps) {
  const [formData, setFormData] = useState<Partial<VideoItem>>({});
    const [categories, setCategories] = useState<CategoryItem[]>([]);
    useEffect(() => {
      fetch(`/api/categories`)
        .then((res) => res.json())
        .then((data) => {
          setCategories(data.data);
        });
    }, []);
  useEffect(() => {
    if (video) {
      setFormData({
        title: video.title,
        description: video.description,
        category: video.category,
        sourceUrl: video.sourceUrl,
        durationSeconds: video.durationSeconds,
        coverUrl: video.coverUrl,
        publishedAt: video.publishedAt
      });
    }
  }, [video]);
  
  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: name === 'durationSeconds' ? parseInt(value, 10) || 0 : value
    }));
  };
  
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await onSave(formData);
  };
  
  return (
    <div className="bg-white dark:bg-zinc-800 rounded-lg shadow p-6">
      <h2 className="text-xl font-semibold mb-4">编辑视频详情</h2>
      <form onSubmit={handleSubmit} className="space-y-4">
        {/* 标题输入框 */}
        <div>
          <label htmlFor="title" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">
            标题 *
          </label>
          <input
            id="title"
            name="title"
            type="text"
            value={formData.title || ''}
            onChange={handleChange}
            required
            className="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md dark:bg-zinc-700 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
        
        {/* 描述输入框 */}
        <div>
          <label htmlFor="description" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">
            描述
          </label>
          <textarea
            id="description"
            name="description"
            value={formData.description || ''}
            onChange={handleChange}
            rows={4}
            className="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md dark:bg-zinc-700 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
        
        {/* 分类选择框 */}
        <div>
          <label htmlFor="category" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">
            分类 *
          </label>
          <select
            id="category"
            name="category"
            value={formData.category || ''}
            onChange={handleChange}
            required
            className="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md dark:bg-zinc-700 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="">请选择分类</option>
            {categories.map(category => (
              <option key={category.id} value={category.id}>{category.name}</option>
            ))}
          </select>
        </div>
        
        {/* 视频源URL */}
        <div>
          <label htmlFor="sourceUrl" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">
            视频源URL *
          </label>
          <input
            id="sourceUrl"
            name="sourceUrl"
            type="text"
            value={formData.sourceUrl || ''}
            onChange={handleChange}
            required
            className="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md dark:bg-zinc-700 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
        
        {/* 封面URL */}
        <div>
          <label htmlFor="coverUrl" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">
            封面URL
          </label>
          <input
            id="coverUrl"
            name="coverUrl"
            type="text"
            value={formData.coverUrl || ''}
            onChange={handleChange}
            className="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md dark:bg-zinc-700 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
        
        {/* 时长输入框 */}
        <div>
          <label htmlFor="durationSeconds" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">
            时长（秒）
          </label>
          <input
            id="durationSeconds"
            name="durationSeconds"
            type="number"
            min="0"
            value={formData.durationSeconds || ''}
            onChange={handleChange}
            className="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md dark:bg-zinc-700 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
        
        {/* 发布日期 */}
        <div>
          <label htmlFor="publishedAt" className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1">
            发布日期
          </label>
          <input
            id="publishedAt"
            name="publishedAt"
            type="datetime-local"
            value={formData.publishedAt ? formData.publishedAt.slice(0, 16) : ''}
            onChange={handleChange}
            className="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md dark:bg-zinc-700 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
        
        {/* 操作按钮 */}
        <div className="flex gap-3 mt-6">
          <button
            type="button"
            onClick={onCancel}
            disabled={isSaving}
            className="px-4 py-2 border border-zinc-300 rounded-md text-sm font-medium text-zinc-700 dark:text-zinc-300 dark:bg-zinc-700 dark:border-zinc-600 hover:bg-zinc-50 dark:hover:bg-zinc-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
          >
            取消
          </button>
          <button
            type="submit"
            disabled={isSaving}
            className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 flex items-center justify-center gap-2"
          >
            {isSaving ? (
              <svg xmlns="http://www.w3.org/2000/svg" className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
              </svg>
            ) : null}
            保存更改
          </button>
        </div>
      </form>
    </div>
  );
}